<template>
  <div id='cardcreator'>

    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
        <el-breadcrumb-item>物料申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--查询条件-->
    <div class="condition-wrap">
      <table>
        <tr>
          <td class='form-label'>申请状态：</td>
          <td class='form-label'>
            <el-select v-model="queryVo.applicationStatus" placeholder="请选择" :clearable="true">
              <el-option v-for="item in applyStatusList" :label="item.name" :value="item.id" :key="item.id">
              </el-option>
            </el-select>
          </td>
          <td class='form-label'>
            <el-button type="info" @click="queryBtnClick">查询</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class='option-wrap'>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-check" @click="addSelection">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gird-wrap">
      <el-table style="width: 100%" height="680" :border="true" :stripe="true" :data="dataList" :fit="true"
        @select="handleSelectionChange" @select-all="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop='engineerName' label="申请人"> </el-table-column>
        <el-table-column prop='modelName' label="型号"></el-table-column>
        <el-table-column prop='solutionName' label="配件"></el-table-column>
        <el-table-column prop='totalProcurement' label="数量"></el-table-column>
        <el-table-column :formatter="formatterStatus" label="申请状态"></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template scope="scope">
            <el-button v-if="scope.row.applicationStatus == 0" type="text" @click="examine(scope.row,1)">通过</el-button>
            <el-button v-if="scope.row.applicationStatus == 0" type="text" @click="examine(scope.row,2)">拒绝</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="pager-wrap">
      <el-pagination :current-page="1" @current-change="handleCurrentChange" @size-change="sizeChange"
        :page-sizes="[50, 100, 200]" :page-size="queryVo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="新增" v-model="addDialogVisible" @close="clearExaM">
      <el-form :inline="true" :model="ExaModel" class="demo-form-inline">
        <el-form-item label="品牌:">
          <el-select v-model="ExaModel.brandNo" filterable placeholder="请选择">
            <el-option v-for="item in brandList" :label="item.brandName" :value="item.No" :key="item.No">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号：">
          <el-input type="text" v-model="ExaModel.modelName"></el-input>
        </el-form-item>
        <el-form-item label="配件：">
          <el-input type="text" v-model="ExaModel.solutionName"></el-input>
        </el-form-item>
        <el-form-item label="申请数量：">
          <el-input type="text" v-model="ExaModel.totalProcurement"></el-input>
        </el-form-item>
        <el-form-item label="价格：">
          <el-input type="text" v-model="ExaModel.purchasePrice"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="onSubmitAdd">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import r from '../../utils/RequestUtil';
  import wxs from '../utils/WxsService'
  import {
    Notification
  } from 'element-ui';
  export default {
    name: 'goods',
    data: function () {
      return {
        applyStatusList: [{
            name: "审核中",
            id: 0
          },
          {
            name: "已通过",
            id: 1
          },
          {
            name: "未通过",
            id: 2
          },
          {
            name: '已撤回',
            id: 3
          }

        ],
        dataList: [],
        cityList: [],
        brandList: [],
        modelList: [],
        solutionList: [],
        engineerList: [],
        total: 0,
        addDialogVisible: false,
        headers: {
          token: window.sessionStorage.getItem("token")
        },
        queryVo: {
          pageSize: 50,
          pageNo: 1,
          cityId: 1,
          brandId: null,
          modelId: null,
          solutionId: null,
          applicationStatus: null,
          beginTime: null,
          endTime: null,
          engineerId: null
        },
        selected: {
          selectedDevice: [],
          selectedProcure: {},
          examineList: [],
          screenProcure: [],
          addSelectedDevice: []
        },
        dataProvider: {
          devices: []
        },
        props: {
          deviceProps: {
            value: "id",
            label: "name",
            children: "children"
          }
        },
        Devices: 11,
        ExaModel: {
          engineerId: null,
          brandNo: null,
          modelName: null,
          engineerName: null,
          solutionName: null,
          applicationStatus: 0,
          totalProcurement: 0,
          purchasePrice: 0,
          No: null,
          status: '1',
        },
        DeviceList: [{
            name: "手机",
            id: 11
          },
          {
            name: "平板",
            id: 15
          }
        ]
      }
    },
    methods: {
      //选择品牌类型
      devicevalue() {
        r.trace(this.Devices);
        this.getDevices(this.Devices);
      },
      //新增
      onSubmitAdd() {
        this.ExaModel.No = Date.now().toString();
        if (this.ExaModel.brandNo == null || this.ExaModel.brandNo == "") {
          r.message("请选择品牌", "error");
          return;
        }
        if (this.ExaModel.modelName == null || this.ExaModel.modelName == "") {
          r.message("请填写型号", "error");
          return;
        }
        if (this.ExaModel.solutionName == null || this.ExaModel.solutionName == "") {
          r.message("请填写配件", "error");
          return;
        }
        if (this.ExaModel.totalProcurement == 0 || this.ExaModel.totalProcurement == null || this.ExaModel
          .totalProcurement == "") {
          r.message("请填写数量", "error");
          return;
        }
        if (this.ExaModel.purchasePrice == 0 || this.ExaModel.purchasePrice == null || this.ExaModel.purchasePrice ==
          "") {
          r.message("请填写价格", "error");
          return;
        }
        wxs.addApplication(this.ExaModel);
        this.addDialogVisible = false;
        this.queryBtnClick();
      },
      //  	清除数据
      clearExaM() {
        this.ExaModel.cityId = null;
        this.ExaModel.brandId = null;
        this.ExaModel.modelId = null;
        this.ExaModel.solutionId = null;
        this.ExaModel.totalProcurement = 0;
        this.ExaModel.purchasePrice = 0;
        this.selected.addSelectedDevice = [];
        this.Devices = 11;
      },
      //取消
      cancel() {
        this.addDialogVisible = false;
        this.clearExaM();
      },
      //新增
      addSelection() {
        this.addDialogVisible = true;
      },
      //状态转化
      formatterStatus(row, column) {
        return this.applyStatusList[row.applicationStatus].name;
      },
      //审核采购
      examine(row, val) {
        this.selected.selectedProcure = row;
        this.selected.selectedProcure.applicationStatus = val;
        this.selected.selectedProcure.applicationQuantity = row.totalProcurement;
        this.selected.examineList.push(this.selected.selectedProcure);

        row.applicationStatus = val;
        wxs.getApplicationExamine(row, row.No);
      },

      //多项审核采购
      handleSelectionChange(selections) {
        this.selected.examineList = selections;
      },
      //查询数据
      queryBtnClick() {
        if (this.queryVo.applicationStatus == null || this.queryVo.applicationStatus == '') {
          this.dataList = wxs.getApplication([{
            engineerId: this.ExaModel.engineerId
          }]);
        } else {
          this.dataList = wxs.getApplication([{
            applicationStatus: this.queryVo.applicationStatus
          }, {
            engineerId: this.ExaModel.engineerId
          }]);
        }
      },
      handleCurrentChange(val) {
        this.queryVo.pageNo = val;
        this.queryBtnClick();
      },
      sizeChange(size) {
        this.queryVo.pageSize = size;
        this.queryBtnClick();
      },
      handlePreview(file) {},
      handleRemove() {},
      handleSuccess(response, file, fileList) {},
    },
    computed: {},
    mounted: function () {
      let user = JSON.parse(window.sessionStorage.getItem("userInfo"));
      this.ExaModel.engineerId = user.No;
      this.ExaModel.engineerName = user.nickName;
      this.brandList = wxs.getBrandInfo();
      this.queryBtnClick();

    }
  }

</script>

<style scoped="scoped">
  tr.detail_row {
    line-height: 30px;
  }

  td.detail_value {
    text-align: left;
    width: 20%;
  }

  td.detail_label {
    width: 10%;
  }

  tr.express_row {
    line-height: 40px;
  }

  .record-table tr {
    height: 32px;
    line-height: 32px;
  }

  .record-table tr td {
    border-bottom: 1px solid #F2F2F2;
  }

  .record-table tr td:first {
    border-right: 1px solid #F2F2F2;
  }

  .record-table tr td {
    border-left: 1px solid #F2F2F2;
  }

  .second-title {
    border-left: 2px solid #1D8CE0;
    font-size: 16px;
    background: #E8E8E8;
    padding: 10px 0;
  }

</style>
